<template lang="">
	<div class="pages-wrap">
		<scroll-view class="content" ref="scroll">
      <template>
		<div class="page">
		<app-header></app-header>

		<div class="orderid" v-if="renderList[0]">
			<span class="span1">订单号</span>
			<span class="span2">2197628722</span>
			<span class="span3">{{ orderstate }}</span>
		</div>

		<div class="city" v-if="renderList[0]">
			<div class="location">
				<div class="title">{{renderList[0].hotelId.title}}</div>
				<div class="time">
					<span class="sp1">入住:{{renderList[0].startdate.slice(5)}}</span>
					<span class="sp2">共{{renderList[0].datelength}}晚</span>
					<span class="sp3">离开：{{renderList[0].enddate.slice(5)}}</span>
				</div>
				<div class="img">
					<img src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u947.png" alt="">
				</div>
				<div class="dw">
					<span class="iconfont icon-dingwei ico"></span>
					<span class="aaa">{{renderList[0].hotelId.city}}</span>
				</div>
			</div>
		</div>

		<div class="xx" v-if="renderList[0]">
			<div class="mz">入住人:{{renderList[0].nike_name}}</div>
			<div class="tel">联系手机:{{renderList[0].tel}}</div>
		</div>

		<div class="fp" v-if="renderList[0]">
			<div class="tie">
				发票信息
				</div>
			<div class="nr">
			<div class="left">发票明细</div>
			<div class="right">
				<span class="i1">订房费</span>
				<span class="i2">{{renderList[0].totalPrice}}元</span>
			</div>
			</div>
			<div class="nr">
			<div class="left">发票抬头</div>
				<div class="right">
			<span class="i1">珠海嘻嘻哈哈股份有限公司</span>
			</div>
		</div>
		<div class="nr">
			<div class="left">纳税人识别号</div>
		<div class="right">
		<span class="i1">112454545454545446</span>
		</div>
		</div>
		<div class="nr">
		<div class="left">配送信息</div>
		<div class="right">
		<span class="i1">张三</span>
		<span class="i2">12525252525</span>
			</div>
		</div>
		<div class="nr">
		<div class="left"></div>
		<div class="right">
		<span class="i1">北京市东城区百子湾西路125号</span>

		</div>
		</div>
		</div>
		<div class="zf" v-if="renderList[0]">
			<div class="fs">
				<div class="pp1">支付方式</div>
				<div class="pp2">在线支付</div>
			</div>
					<div class="je">
				<span>支付金额:</span>
				<span class="b">￥{{renderList[0].totalPrice}}</span>
				
			</div>
			<div class="bb">
				{{date}}
			</div>
			<div class="anniu">
				<span class="cancl" @click = "canclAction">取消订单</span>
				<span class="cancl1" @click = "againAction">再次预定</span>
			</div>
			

		</div>

		</div>
	</template>
    </scroll-view>
	</div>
</template>
<script>
import { orderDetailApi } from '@/api/mine';
import { Toast } from 'vant';

export default {
	name: 'orderlist',
	data() {
		return {
			renderList: {

			},
		}
	},
	computed: {
		date() {
			return this.formatTime(new Date(+this.renderList[0].orderTime))
		},
		orderstate() {
			if (this.renderList[0].orederstate == 1) {
				return "待酒店确认"
			} else if (this.renderList[0].orederstate == 2) {
				return "未付款"
			} else if (this.renderList[0].orederstate == 3) {
				return "已退订"
			} else {
				return "待酒店确认"
			}
		}
	},
	methods: {
		async canclAction() {
			this.$store.dispatch("hotelOrder/changeOrderState", { orederstate: 3 });
			Toast("退订成功，钱款将在24小时内原路退回您的账户");
			this.$router.replace("/mine");
		},
		async againAction() {
			this.$router.replace(`/home/detail/${this.renderList[0].hotelId._id}`);
		},
		async orderDetail() {
			let orderId = this.$route.params.orderId;
			let res = await orderDetailApi({ orderId });
			this.renderList = res.data.orderDetailData
			// console.log(this.renderList);
		},

		formatTime(date) {
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			m = m < 10 ? "0" + m : m;

			var d = date.getDate();
			d = d < 10 ? "0" + d : d;

			var h = date.getHours();
			h = h < 10 ? "0" + h : h;

			var min = date.getMinutes();
			min = min < 10 ? "0" + min : min;

			var s = date.getSeconds();
			s = s < 10 ? "0" + s : s;

			var day = date.getDay();
			// 0-6
			var week = [
				"星期天",
				"星期一",
				"星期二",
				"星期三",
				"星期四",
				"星期五",
				"星期六",
			];

			var res = `${y}-${m}-${d} ${h}:${min}:${s} ${week[day]}`;

			return res;
		}

	},

	created() {
		// console.log(this.selete);
		// console.log(this.$route.params);
		// this.$store.dispatch("hotelOrder/createmyorder",list)
		this.orderDetail()
	},
};
</script>

<style lang="scss" scoped>
@function vw($px) {
	@return ($px/375) * 100vw;
}

.anniu {
	font-size: vw(16);
	display: flex;
	align-items: center;
	height: vw(60);
	padding-top: vw(10);
	justify-content: space-around;

	.cancl {
		border: 1px solid #f66;
		border-radius: vw(5);
		padding: vw(15);
		color: #f66;
		background-color: #fff;
	}

	.cancl1 {
		background-color: #f66;
		border-radius: vw(5);
		padding: vw(15);
		color: #fff;
	}
}

.bb {
	padding-left: vw(200);
	background-color: #fff;
}

.je {
	height: vw(40);
	background-color: #fff;
	font-size: vw(16);
	display: flex;
	align-items: center;
	padding-left: vw(220);

	.b {
		position: relative;
		left: vw(20);
		color: red;
	}
}

.pages-wrap {
	position: absolute;
	top: 0%;
	left: 0%;
	right: 0%;
	bottom: 0%;
	z-index: 102;
	background-color: #fbfbfb;

	.content {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		// position: relative;

		::v-deep .scroll-wrap {
			bottom: 0;
		}


		.page {
			width: 100%;
			position: relative;
			top: 0;
			left: 0;
			background-color: #fff;
			padding-top: vw(60);
			display: flex;
			flex-direction: column;
			align-items: center;

			.zf {
				width: 100%;
				height: vw(170);
				background-color: #fff;
				position: relative;
				top: vw(30);
				padding-bottom: vw(20);

				.fs {
					height: vw(30);
					background-color: #fff;
					display: flex;
					align-items: center;
					position: relative;
					font-size: vw(16);
					border-bottom: 1px dashed #ccc;

					.pp1 {
						position: absolute;
						left: vw(15);
					}

					.pp2 {
						position: absolute;
						right: vw(15);

					}
				}
			}

			.fp {
				width: 100%;
				height: vw(230);
				background-color: #fff;
				position: relative;
				top: vw(20);

				.nr {
					height: vw(36);
					// background-color: #fff;
					display: flex;

					.left {
						width: 40%;
						display: flex;
						align-items: center;
						font-size: vw(16);
						padding-left: vw(16);
						box-sizing: border-box;

					}

					.right {
						width: 60%;
						// background-color: yellow;
						display: flex;
						align-items: center;
						font-size: vw(16);
						// padding-left: vw(16);
						box-sizing: border-box;

						.i2 {
							padding-left: vw(20);
							box-sizing: border-box;
						}
					}
				}

				.tie {
					height: vw(38);
					display: flex;
					align-items: center;
					padding-left: vw(16);
					background-color: #fff;
					font-size: vw(17);
				}
			}

			.xx {
				width: 100%;
				height: vw(70);
				background-color: #fff;
				position: relative;
				top: vw(10);

				div {
					height: 50%;
					display: flex;
					align-items: center;
					font-size: vw(16);
					padding-left: vw(20);
				}
			}

			.city {
				width: 100%;
				height: vw(345);
				// background-color: red;
				display: flex;
				justify-content: center;
				position: relative;
				top: vw(10);
				align-items: center;

				.location {
					width: 90%;
					height: 95%;
					background-color: #fff;

					.dw {
						width: 100%;
						height: vw(45);
						// background-color: #eeeaaa;
						display: flex;
						position: relative;

						span {
							display: block;
							height: 100%;
							font-size: vw(16);
							display: flex;
							align-items: center;
						}

						.ico {
							position: absolute;
							left: vw(10);
						}

						.aaa {
							position: absolute;
							left: vw(40);
							bottom: vw(-4);
						}
					}

					.img {
						width: 98%;
						height: vw(190);
						position: relative;
						left: vw(4);

						img {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						// background-color: #abaaba;
						height: vw(48);
						font-size: vw(16);
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.time {
						height: vw(40);
						width: 100%;
						// background-color: aqua;
						display: flex;
						position: relative;

						span {
							display: block;
							height: 100%;
							font-size: vw(16);
							display: flex;
							align-items: center;
						}

						.sp1 {
							position: absolute;
							left: vw(10);
						}

						.sp2 {
							position: absolute;
							left: vw(150);
						}

						.sp3 {
							position: absolute;
							right: vw(10);
						}
					}
				}
			}

			.orderid {
				position: relative;
				top: vw(10);
				width: 100%;
				height: vw(50);
				display: flex;
				background-color: #fff;

				span {
					height: 100%;
					display: block;
					// color: red;
					font-size: vw(16);
					display: flex;
					align-items: center;
				}

				.span1 {
					position: absolute;
					left: vw(20);
				}

				.span2 {
					position: relative;
					left: vw(120);
				}

				.span3 {
					position: absolute;
					right: vw(20);
					color: red;
				}
			}
		}
	}
}
</style>

